<template>
    <div id="credit-limit">
        <el-form label-width="110px" style="width: 100%; padding: 15px 0">
            <div class="topbox">
                <RiskCollapse @handle-change="handleCollapse" style="width: 70%; border: none">
                    <template slot="titleLine">
                        <el-row style="width: 100%" @click.native.stop @keyup.native.capture.stop.prevent>
                            <el-col :span="6">
                                <el-form-item label="业务日期：">
                                    <el-date-picker
                                        v-model="searchParams.businessDate"
                                        type="date"
                                        value-format="yyyyMMdd"
                                        placeholder="选择日期"
                                        size="mini"
                                        :clearable="false"
                                    >
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="产品分类：">
                                    <el-select v-model="searchParams.fundKindTypeList" multiple collapse-tags clearable size="mini">
                                        <el-option v-for="i in fundKindTypeStorage" :key="i.dictKey" :label="i.dictKeyName" :value="i.dictKey">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="白名单类型：">
                                    <el-select v-model="searchParams.creditKindIdList" multiple collapse-tags clearable size="mini">
                                        <el-option v-for="i in creditKindIdStorage" :key="i.dictKey" :label="i.dictKeyName" :value="i.dictKey">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <!-- <el-form-item label="超额度："> -->
                                <el-checkbox v-model="searchParams.excessDegree" style="margin-left: 10px">超额度</el-checkbox>
                                <!-- </el-form-item> -->
                            </el-col>
                        </el-row>
                    </template>
                    <el-row style="width: 70%">
                        <el-col :span="6">
                            <el-form-item label="额度分类：">
                                <el-select v-model="searchParams.quotaTypeList" multiple collapse-tags clearable size="mini">
                                    <el-option v-for="i in quotaTypeStorage" :key="i.dictKey" :label="i.dictKeyName" :value="i.dictKey"> </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="授信主体类型：">
                                <el-select v-model="searchParams.orgTypeList" multiple collapse-tags @change="handleOrgType" clearable size="mini">
                                    <el-option v-for="i in orgTypeStorage" :key="i.dictKey" :label="i.dictKeyName" :value="i.dictKey"> </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="白名单主体：">
                                <el-select
                                    v-model="searchParams.orgCodeList"
                                    :disabled="orgDisabled"
                                    remote
                                    multiple
                                    collapse-tags
                                    :remote-method="getIssueSelect"
                                    :loading="selectLoading"
                                    filterable
                                    clearable
                                    @clear="getIssueSelect('')"
                                    size="mini"
                                >
                                    <template v-if="searchParams.orgTypeList.includes('1')">
                                        <el-option
                                            v-for="i in orgCodeStorage"
                                            :key="i.dictKey"
                                            :label="i.param2 ? i.dictKey + ' ' + i.param2 : i.dictKey + ' ' + i.dictKeyName"
                                            :value="i.dictKey"
                                        >
                                        </el-option>
                                    </template>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2" style="height: 40px; line-height: 40px">
                            <el-checkbox
                                false-label="0"
                                true-label="1"
                                size="mini"
                                label="准确搜索"
                                style="margin-left: 8px; width: 116px"
                                v-model="precision"
                                border
                            ></el-checkbox>
                        </el-col>
                        <!-- <el-col :span="6" :offset="3">
                        <div style="float: right; height: 40px; line-height: 40px; margin-bottom: 5px">
                            <el-button @click="handleSearchClick" type="primary" icon="el-icon-search">查询</el-button>
                            <el-button @click="handleReset" icon="el-icon-delete">重置</el-button>
                        </div>
                    </el-col> -->
                    </el-row>
                    <el-row style="width: 30%">
                        <el-col :span="8" style="margin-left: -100px; line-height: 40px; height: 100%">
                            <!-- <el-form-item label="实际额度不为0："> -->
                            <el-checkbox v-model="searchParams.realCreditQuotaIsNoZero">实际额度不为0</el-checkbox>
                            <!-- </el-form-item> -->
                        </el-col>
                        <el-col :span="8" style="line-height: 40px; height: 100%">
                            <!-- <el-form-item label="实际额度与明细不一致：" label-width="200px"> -->
                            <el-checkbox v-model="searchParams.different">实际额度与明细不一致</el-checkbox>
                            <!-- </el-form-item> -->
                        </el-col>
                    </el-row>
                </RiskCollapse>
                <!-- 表格工具栏 -->
                <div class="table-toolbar">
                    <!-- <el-button type="primary" @click="getCreditLimitList">刷新</el-button> -->
                    <el-button @click="handleSearchClick" type="primary">查询</el-button>
                    <el-button @click="handleReset">重置</el-button>
                    <!-- <el-button type="primary" @click="handleExport">导出</el-button> -->
                    <el-dropdown trigger="click" @command="handleExport">
                        <el-button type="primary">导出<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="export">导出当前页</el-dropdown-item>
                            <el-dropdown-item command="exportAll">导出全部</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-button type="primary" @click="handleOISData" :loading="OISStatus === '2'">重新取数</el-button>
                    <el-button @click="layoutDialog = true" type="primary">布局设置</el-button>
                </div>
            </div>
        </el-form>

        <!--  -->
        <RiskTable
            ref="risk-table"
            :style="activeName ? { height: 'calc(100% - 168px)' } : { height: 'calc(100% - 133px)' }"
            :tableData="tableData"
            :tableConfig="tableConfig"
            :column="showColumns"
            :paging="paging"
            :searchParams="searchParams"
            v-loading="tableLoading"
            :key="tableKey"
            @page-change="getCreditLimitList"
        >
            <template #expand="{ row }">
                <div v-if="row.detail && row.detail.length">
                    <vxe-table
                        class="detail-table"
                        :data="pagingProxy(row.detail, row.paging)"
                        :sort-config="{ remote: true }"
                        @sort-change="handleSort($event, row.detail)"
                        show-header-overflow
                        :auto-resize="true"
                        resizable
                    >
                        <vxe-column
                            v-for="i in detailColumns"
                            :field="i.field"
                            :title="i.title"
                            :key="i.field + tableKey"
                            :sortable="i.sortable"
                            :align="i.align"
                            show-overflow="tooltip"
                            :formatter="formatter"
                        >
                        </vxe-column>
                    </vxe-table>
                    <RiskPagination :paging="row.paging"></RiskPagination>
                </div>
            </template>
        </RiskTable>

        <!-- 布局设置 -->
        <RiskTableLayout
            ref="risk-table-layout"
            :tableName="'OIS_CREDIT_RESULT'"
            v-if="layoutMount"
            :visible.sync="layoutDialog"
            :column="columns"
            :fixedColumns="fixedColumns"
            :resetNoSelectedFieldList="resetNoSelectedFieldList"
        />
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import RiskCollapse from '@/common/components/risk-collapse.vue';
import RiskTable from '@/common/components/risk-table-plus.vue';
import { ColumnVO, DictVO, PageVO, TableConfigVO, VueObject } from '@/common/vo';
import RiskPagination from '@/common/components/risk-pagination.vue';
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';
import XEUtils from 'xe-utils';
import { dateFormat, numberFormat, thousandsFormat, timeFormat } from '@/utils/tools';
import API from './api/credit-limit';
import { CreditLimitRepVO, CreditLimitReqDTO } from './vo/credit-limit';
import { getIssueSelect } from '@/common/api/commonApi';
import { CustomModule } from '@/store/modules/custom';
import { downLoadFile } from '@/utils/request';
import RiskTableLayout from '@/common/components/risk-table-layout-plus.vue';

@Component({ name: 'CreditLimit', components: { RiskCollapse, RiskTable, RiskPagination, RiskTableLayout } })
export default class CreditLimit extends Vue {
    activeName = ''; // 折叠面板

    searchParams: CreditLimitReqDTO = {
        // businessDate: XEUtils.toDateString(new Date(), 'yyyyMMdd'), // 业务日期
        businessDate: '',
        fundKindTypeList: [],
        creditKindIdList: [],
        excessDegree: false, // 超额度
        quotaTypeList: [],
        orgTypeList: ['1'], // 授信主体类型
        orgCodeList: [], // 白名单主体
        orgCode: '', // 授信主体模糊查询
        realCreditQuotaIsNoZero: false, // 实际额度为0
        different: false, // 实际额度与明细不一致
    };

    numberFormat = numberFormat;
    dateFormat = dateFormat;
    timeFormat = timeFormat;
    fundKindTypeStorage: DictVO[] = []; // 产品分类下拉
    creditKindIdStorage: DictVO[] = []; // 白名单类型下拉
    quotaTypeStorage: DictVO[] = []; // 额度分类下拉
    orgTypeStorage: any[] = []; // 授信主体类型下拉
    orgCodeStorage: DictVO[] = []; // 授信主体下拉 (主体类型 = 机构时, 下拉为发行人)
    dateTypes: any = { '0': '持仓', '1': '指令' };
    selectLoading: boolean = false;

    tableLoading: boolean = false;
    tableData: CreditLimitRepVO[] = [];
    tableConfig: TableConfigVO = {
        rowKey: 'ruleId', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };

    columns: ColumnVO[] = [];
    showColumns: ColumnVO[] = [];
    fixedColumns: ColumnVO[] = [{ title: '白名单编号', field: 'ruleId' }];
    resetNoSelectedFieldList: ColumnVO[] = [
        { title: '授信主体类型', field: 'orgType' },
        { title: '额度分类', field: 'quotaType' },
    ];

    paging: PageVO = { pageSize: 25, currentPage: 1, total: 0 };

    detailColumns: ColumnVO[] = [
        { title: '产品代码', field: 'fundCode', sortable: true },
        { title: '产品名称', field: 'fundName', sortable: true },
        { title: '证券代码', field: 'stockCode', sortable: true },
        { title: '证券名称', field: 'stockName', sortable: true },
        { title: '数据类型', field: 'dateType', sortable: true, align: 'center' },
        { title: '持仓市值/面值(亿元)', field: 'marketValue', sortable: true, align: 'right' },
    ];

    originalData: any[] = []; // 原始备份数据
    orgDisabled: boolean = false;

    OISing: boolean = false;
    OISStatus: string = '4';
    timer: any;
    precision: string = '0'; // 准确搜索

    layoutMount: boolean = false;
    layoutDialog: boolean = false;
    tableKey: number = 0;
    created() {}

    async mounted() {
        this.orgTypeStorage = await SGU_CACHE('orgType', '/dict/list/code/Y_000304', []);
        this.orgTypeStorage.forEach((i) => {
            i.value = i.dictKey;
            i.label = i.dictKeyName;
        });

        await API.getFundKindType().then((res: DictVO[]) => {
            res.forEach((i) => {
                i.value = i.dictKey;
                i.label = i.dictKeyName;
            });
            this.fundKindTypeStorage = res || [];
        });

        await API.getCreditKindId().then((res: DictVO[]) => {
            res.forEach((i) => {
                i.value = i.dictKey;
                i.label = i.dictKeyName;
            });
            this.creditKindIdStorage = res || [];
        });
        this.layoutMount = true;

        this.quotaTypeStorage = await API.getQuotaType();
        this.quotaTypeStorage.forEach((i) => {
            i.value = i.dictKey;
            i.label = i.dictKeyName;
        });

        console.log('父组件 created');

        this.columns = [
            {
                type: 'expand', // 展开
                align: 'center',
                width: 50,
            },
            {
                title: '白名单编号',
                field: 'ruleId',
                sortable: true,
                sortField: 'N_RULE_ID',
                filters: [{ data: '' }],
                filterType: 'search',
                minWidth: 150,
            },
            {
                title: '产品分类',
                field: 'fundKindType',
                sortable: true,
                sortField: 'C_FUND_KIND_TYPE',
                filters: this.fundKindTypeStorage,
                filterField: 'fundKindTypeList',
                align: 'center',
                minWidth: 150,
                render: (value, record) => this.fundKindTypeStorage.find((i) => i.dictKey === value)?.dictKeyName,
            },
            {
                title: '授信主体类型',
                field: 'orgType',
                sortable: true,
                sortField: 'C_ORG_TYPE',
                // filters: this.orgTypeStorage,
                align: 'center',
                minWidth: 130,
                render: (value, record) => this.orgTypeStorage.find((i) => i.dictKey === value)?.dictKeyName,
            },
            {
                title: '白名单主体',
                field: 'orgName',
                sortable: true,
                sortField: 'C_ORG_NAME',
                filters: [{ data: '' }],
                filterType: 'search',
                minWidth: 140,
            },
            {
                title: '额度分类',
                field: 'quotaType',
                sortable: true,
                sortField: 'C_QUOTA_TYPE',
                filters: this.quotaTypeStorage,
                // filters: [{ label: '总额度', value: '1', dictKey: '1', dictKeyName: '总额度' }],
                filterField: 'quotaTypeList',
                align: 'center',
                minWidth: 120,
                render: (value, record) => this.quotaTypeStorage.find((i) => i.dictKey === value)?.dictKeyName,
            },
            {
                title: '白名单类型',
                field: 'creditKindId',
                sortable: true,
                sortField: 'C_CREDIT_KIND_ID',
                filters: this.creditKindIdStorage,
                filterField: 'creditKindIdList',
                align: 'center',
                minWidth: 120,
                render: (value, record) => this.creditKindIdStorage.find((i) => i.dictKey === value)?.dictKeyName,
            },
            {
                title: '额度(亿元)',
                field: 'creditQuota',
                sortable: true,
                sortField: 'N_CREDIT_QUOTA',
                align: 'right',
                minWidth: 120,
                render: (value, record) => numberFormat(value),
            },
            {
                title: '业务日期',
                field: 'businessDate',
                sortable: true,
                sortField: 'D_BUISSNESS_DATE',
                align: 'center',
                minWidth: 100,
                render: (value, record) => dateFormat(value),
            },
            {
                title: '币种代码',
                field: 'currencyNo',
                // sortable: true,
                // sortField: 'C_CURRENCY_NO',
                // filters: this.creditKindIdStorage,
                minWidth: 100,
            },
            {
                title: '实际计算日期',
                field: 'calDate',
                sortable: true,
                sortField: 'D_CAL_DATE',
                align: 'center',
                minWidth: 120,
                render: (value, record) => dateFormat(value),
            },
            {
                title: '实际计算时间',
                field: 'calTime',
                sortable: true,
                sortField: 'D_CAL_TIME',
                align: 'center',
                minWidth: 120,
                render: (value, record) => timeFormat(value),
            },
            {
                title: '实际计算值(亿元)',
                field: 'calValue',
                sortable: true,
                sortField: 'N_CAL_VALUE',
                align: 'right',
                minWidth: 140,
                render: (value, record) => numberFormat(value),
            },
            {
                title: '实际额度与明细是否一致',
                field: 'coincidence',
                // sortable: true,
                // sortField: 'N_CAL_VALUE',
                align: 'center',
                minWidth: 180,
            },
        ];

        // 监听布局设置
        this.$watch(
            () => {
                return (this.$refs['risk-table-layout'] as VueObject).showColumns;
            },
            (val) => {
                console.log(val, 'val');
                this.showColumns = val && val.length ? val : this.columns;
                this.tableKey++;
                // (this.$refs['risk-table'] as VueObject).$refs['xTable'].refreshColumn();
            }
        );

        this.getIssueSelect('');

        this.getCreditLimitList();
        this.$axios({ method: 'get', url: '/ois/queryStatus' }).then((res: any) => {
            // 0失败 1成功 2正在同步 3同步失败 4未同步
            if (res === '2') {
                this.timer = setInterval(() => this.getOISStatus(), 60000);
            }
            this.OISStatus = res || '4';
        });
    }

    /**
     * 获取授信额度结果表
     */
    async getCreditLimitList() {
        this.tableLoading = true;
        API.getCreditLimitList({ ...this.searchParams, paging: this.paging })
            .then((res: any) => {
                res.list.forEach((i) => (i.paging = { pageSize: 25, currentPage: 1, total: i.detail ? i.detail.length : 0 }));
                this.tableData = res.list || [];

                this.originalData = JSON.parse(JSON.stringify(this.tableData));
                this.paging.total = res.total || 0;
            })
            .finally(() => {
                this.tableLoading = false;
            });
    }

    /**
     * 模糊查询发行人下拉框
     */
    async getIssueSelect(val: string) {
        this.selectLoading = true;
        this.orgCodeStorage = await getIssueSelect(val, this.precision);
        this.selectLoading = false;
    }

    /**
     * 查询按钮事件
     */
    handleSearchClick() {
        this.paging.currentPage = 1;
        this.getCreditLimitList();
    }

    /**
     * 重置按钮事件
     */
    handleReset() {
        this.searchParams = {
            // businessDate: XEUtils.toDateString(new Date(), 'yyyyMMdd'), // 业务日期
            businessDate: '',
            fundKindTypeList: [],
            creditKindIdList: [],
            excessDegree: false, // 超额度
            quotaTypeList: [],
            orgTypeList: ['1'], // 授信主体类型
            orgCodeList: [], // 白名单主体
            orgCode: '', // 授信主体模糊查询
            realCreditQuotaIsNoZero: false, // 实际额度为0
            different: false, // 实际额度与明细不一致
        };
        this.precision = '0';
        this.orgDisabled = false;
    }

    /**
     * 折叠面板事件
     */
    handleCollapse(activeName): void {
        this.activeName = activeName;
    }

    /**
     * 分页代理
     */
    pagingProxy(list, page): any[] {
        return list.slice((page.currentPage - 1) * page.pageSize, page.currentPage * page.pageSize);
    }

    /**
     * 详情表格全页排序
     */
    handleSort({ property, order }, list: any[]): void {
        if (order === 'desc') {
            if (['fundCode', 'stockCode'].includes(property)) {
                list.sort((b, a) => (a[property] || '').replace(/[^0-9]/gi, '') - (b[property] || '').replace(/[^0-9]/gi, ''));
            } else if (property === 'marketValue') {
                list.sort((b, a) => a[property] - b[property]);
            } else {
                list.sort((b, a) => a[property].localeCompare(b[property]));
            }
        } else if (order === 'asc') {
            if (['fundCode', 'stockCode'].includes(property)) {
                list.reverse();
            } else if (property === 'marketValue') {
                list.sort((b, a) => b[property] - a[property]);
            } else {
                list.sort((b, a) => b[property].localeCompare(a[property]));
            }
        } else {
            list.sort((b, a) => (b.fundCode || '').replace(/[^0-9]/gi, '') - (a.fundCode || '').replace(/[^0-9]/gi, ''));
        }
        this.$forceUpdate();
    }

    handleOrgType(val: string[]): void {
        if (val.length) {
            this.orgDisabled = false;

            if (!val.includes('1')) {
                this.searchParams.orgCodeList = [];
            }
            return;
        }
        this.searchParams.orgCodeList = [];
        this.orgDisabled = true;
    }

    handleOISData(): void {
        API.initOISData().then((res: any) => {
            this.yh_message_info('发起重新取数...');
            // CustomModule.updateOISStatus('2');
            this.OISStatus = '2';
            this.OISing = true;
            this.timer = setInterval(() => this.getOISStatus(), 60000);
        });
    }

    getOISStatus() {
        this.$axios({ method: 'get', url: '/ois/queryStatus' }).then((res: any) => {
            // 0失败 1成功 2正在同步 3同步失败 4未同步
            if (res === '1' && this.OISStatus === '2') {
                this.yh_message_success('取数成功!');
                if (this.timer) {
                    this.timer && clearInterval(this.timer);
                    this.timer = null;
                }
            } else if ((res === '0' || res === '3') && this.OISStatus === '2') {
                this.yh_message_success('取数失败!');
                if (this.timer) {
                    this.timer && clearInterval(this.timer);
                    this.timer = null;
                }
            }
            this.OISStatus = res || '4';
        });
    }

    beforeDestroy() {
        if (this.timer) {
            this.timer && clearInterval(this.timer);
            this.timer = null;
        }
    }

    // get OISStatus() {
    //     if ((this.OISing && CustomModule.getOISStatus === '0') || CustomModule.getOISStatus === '3') {
    //         this.yh_message_error('取数失败!');
    //         this.OISing = false;
    //     } else if (this.OISing && CustomModule.getOISStatus === '1') {
    //         this.yh_message_success('取数成功!');
    //         this.OISing = false;
    //     }

    //     return CustomModule.getOISStatus;
    // }

    formatter({ cellValue, column }) {
        if (column.property === 'marketValue') {
            return numberFormat(cellValue) || '--';
        } else if (column.property === 'dateType') {
            return this.dateTypes[cellValue] || '--';
        }
        return cellValue || '--';
    }

    handleExport(e) {
        let data = this.searchParams;
        if (e === 'export') {
            data = { ...data, paging: this.paging };
        }
        // if (e === 'exportAll') {
        // }

        downLoadFile({
            url: '/ois/export',
            method: 'post',
            data,
            loading: true,
            loadingMsg: '正在准备导出，请稍后··· ···',
        });
    }
}
</script>
<style lang="scss" scoped>
#credit-limit {
    height: 100%;
    width: 100%;
    padding: 0 5px;
    /** 永赢1680*1050 */
    // min-width: 1500px;
}

.table-toolbar {
    width: 30%;
    /* display: inline-block; */
    text-align: center;
    margin: 5px 0 5px 0;

    /deep/ .el-button {
        padding: 7px 10px;
        margin-left: 5px;
    }

    /deep/ .el-button + .el-button {
        margin-left: 5px;
    }

    /deep/ .el-button [class*='el-icon-'] + span {
        margin-left: 0;
    }

    // /deep/ .el-button {
    //     margin-bottom: 5px;
    // }
}

// .table-toolbar:after {
//     content: '';
//     display: block;
//     height: 3px;
//     /* visibility: hidden; */
//     clear: both;
//     border-bottom: 1px solid #e4e7ed;
//     // color: red;
//     width: 100%;
// }

/deep/ .el-form-item {
    margin: 0;

    .el-form-item__label {
        color: #575757;
        padding: 0;
    }

    .el-form-item__content {
        .el-select--mini {
            width: 100%;
        }

        .el-date-editor.el-input {
            width: 100%;
        }

        .el-input-group {
            vertical-align: inherit;
            display: inline-table;
        }
    }
}

/deep/ .el-input--mini .el-input__inner {
    line-height: unset !important;
}

/deep/ .el-input--suffix .el-input__inner {
    height: 28px !important;
}

// /deep/ .el-select__tags {
//     height: 28px !important;
// }

// /deep/ .el-select__tags span.el-tag:first-child .el-select__tags-text {
//     width: calc(100% - 10px);
//     overflow: hidden;
//     text-overflow: ellipsis;
//     white-space: nowrap;
//     display: inline-block;
// }

// /deep/ .el-select__tags span.el-tag:first-child {
//     max-width: calc(100% - 62px);

//     .el-tag__close {
//         top: -3px;
//         right: 0;
//     }
// }

// /deep/ .el-select__tags span.el-tag:nth-child(2) {
//     // width: 55px; // 三位数
//     padding: 0 5px;
// }

/***  collapse-tags样式 ***/
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: fit-content;
    padding: 0px 5px 0 0;
    margin: 4px 0px 2px 2px;
    .el-select__tags-text {
        display: inline-block;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light:first-of-type {
    width: 63%;
}
/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light:last-of-type {
    width: 100%;
}
/***  collapse-tags样式 ***/

/deep/ .detail-table .vxe-table--body-wrapper.body--wrapper {
    min-height: 10px;
}

/deep/ .vxe-table--render-default .vxe-body--expanded-cell {
    padding: 0 0 10px 50px;
}

.my-input {
    margin: 10px;
    width: 150px;
}

.topbox {
    display: flex;
}
</style>
